<template>
  <!-- 头部：一级分类列表 -->
  <div>
    <div class="homepage-item">
      <van-tabs
        v-model="active"
        color="#f06742"
        line-width="18px"
        line-height="3px"
        title-inactive-color="#72727b"
        title-active-color="#40404c"
        @click="toTabsPages"
      >
        <van-tab
          v-for="(item, index) in tabList"
          :title="item.moduleName"
          :key="index"
          :title-style="{ fontSize: active === index ? '18px' : '' }"
        >
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import { getTitleCategoryApi } from "@/api/components";
  export default {
    name: "XmlyItem",
    data() {
      return {
        active: "",
        tabList: [],
      };
    },
    mounted() {
      this.getTabList();
    },
    methods: {
      async getTabList() {
        const result = await getTitleCategoryApi();
        this.tabList = result.data;
        console.log(result);
      },

      // 跳转Item对应页面
      toTabsPages(e) {
        // if (this.tabList[e].moduleKey === "tuijian") {
        //   this.$router.push({
        //     name: "XmlyRecommend",
        //   });
        // } else {
        //   this.$router.push({
        //     name: "",
        //   });
        // }
        this.$router.push({
          name: this.tabList[e].moduleKey,
        });
      },
    },
  };
</script>

<style>
  .homepage-item {
    width: 100%;
    border-bottom: thin solid #e8e8e8;
  }
</style>
